import React,{Component} from 'react';
import {
  Text,
  TextInput,
  View,
  StyleSheet,
  TouchableOpacity,
  Dimensions,
  Image
} from 'react-native';

var screenWidth=Dimensions.get('window').width;

const headerLeftIcon=(
  <TouchableOpacity >
  <View style={{flexDirection:'row',alignItems:'center'}}>
  <Image source={require('../image/icon_message_back.png')} 
  style={{width:20,height:20}}></Image>
  <Text style={{fontSize:18,color:'#292c33'}}>返回</Text>
  </View>
  </TouchableOpacity>
);

const headerRightIcon=(
    <View style={{flexDirection:'row',alignItems:'center'}}>
    <Image
    style={{width:20,height:20}}></Image>
    <Text style={{fontSize:18,color:'#292c33'}}>    </Text>
    </View>
  );

export default class ForgetPasswordScreen extends Component{
     static navigationOptions=({navigation,screenProps})=>({
        headerLeft:(
            <TouchableOpacity onPress={()=>navigation.state.params.pressBack()}>
            <View style={{flexDirection:'row',alignItems:'center'}}>
            <Image source={require('../image/icon_message_back.png')} 
            style={{width:20,height:20}}></Image>
            <Text style={{fontSize:18,color:'#292c33'}}>返回</Text>
            </View>
            </TouchableOpacity>
          ),
        headerRight:headerRightIcon,
        headerBackTitle:'返回',
        headerTitle:'忘记密码',
     });

    constructor(props){
        super(props);
        this.state={
            phoneNumber:'',
            buttonOpacity:1.0,
            buttonColor:'#c4c6cc',
            pressNable:true,
        }
    }

    goToBack(){
        // alert('点击下一步');
        this.props.navigation.goBack(); 
    }

    componentDidMount(){
        this.props.navigation.setParams({
            pressBack:()=>this.goToBack()
        });
    }
   
    _onPress(){
       alert('点击下一步');
    }

    _onInputTextChange(text){
        this.setState({phoneNumber:text});
        if(text){
            this.setState({pressNable:false,buttonColor:'#ff7733',buttonOpacity:0.5})
        }else{
            this.setState({pressNable:true,buttonColor:'#c4c6cc',buttonOpacity:1.0})
        }
    }

    render(){

        return(
          <View style={styles.container}>
              <View style={{flexDirection:'row',alignItems:'center',marginTop:20,
                 backgroundColor:'#f2f3f5',borderRadius:4,paddingLeft:8,paddingRight:8}}>
                  <Text style={{fontSize:16,color:'#5c5f66'}}>+86</Text>
                  <TextInput 
                    style={styles.input}
                    placeholder='手机号码'
                    placeholderTextColor='#c4c6cc'
                    value={this.state.phoneNumber}
                    onChangeText={(text)=>this._onInputTextChange(text)}
                    underlineColorAndroid={'transparent'}
                  >
                  </TextInput>
              </View>  

              <TouchableOpacity 
                  style={[styles.button,{backgroundColor:this.state.buttonColor}]}
                  activeOpacity={this.state.buttonOpacity}
                  onPress={this._onPress.bind(this)}
                  disabled={this.state.pressNable}
              >
                  <Text style={styles.text}>下一步</Text>
              </TouchableOpacity>
          </View>
        );
    }

}

const styles=StyleSheet.create(
    {
       container:{
           flex:1,
           flexDirection:'column',
           backgroundColor:'#ffffff',
           paddingLeft:15,
           paddingRight:15,
       },
       text:{
           fontSize:16,
           color:'#ffffff',
       },
       input:{
           fontSize:16,
           flex:1,
           marginLeft:4
       },
       button:{
           marginTop:30,
           borderRadius:5,
           alignSelf:'center',
           justifyContent:'center',
           alignItems:'center',
           height:45,
           width:screenWidth-30,
       }
    }
);